<template>
  <div class="container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          v-if="!this.isSkip"
        >
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>大数据</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索行 -->
        <el-row :gutter="24">
          <el-col :span="18" :offset="0" class="seach">
            <el-form
              :model="filter"
              ref="filter"
              :rules="rules"
              label-width="80px"
              :inline="true"
              size="inline"
            >
              <el-form-item label="目录名称">
                <el-input
                  v-model="directoryName"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="state" placeholder="请选择活动区域">
                  <el-option
                    v-for="item in options"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="delSearch" size="small">清除</el-button>
                <el-button type="primary" @click="onSearch" size="small"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6" :offset="0" class="btn">
            <el-button
              type="text"
              size="small"
              class="back"
              @click="back"
              v-if="!this.isSkip"
            >
              <i class="el-icon-back"></i>
              返回学科
            </el-button>
            <el-button
              type="success"
              size="small"
              class="add"
              @click="openDialog"
            >
              <i class="el-icon-edit"></i>
              新增目录
            </el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 数据提示 -->
      <el-alert
        type="info"
        effect="light"
        show-icon
        :closable="false"
        :title="`数据一共${counst}条`"
      ></el-alert>
      <!-- 数据展示区域 -->
      <el-table :data="form">
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column label="所属学科" prop="subjectName">
          <template slot-scope="scope">
            <span v-if="scope.row.subjectName == null">
              <i class="el-icon-document-delete"></i>
            </span>
            <span v-else>{{ scope.row.subjectName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="目录名称" prop="directoryName">
        </el-table-column>
        <el-table-column label="创建者" prop="username"> </el-table-column>
        <el-table-column label="创建日期" prop="addDate" width="160px">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | dateFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button @click="changeState(scope.row)" type="text" size="small"
              ><span>{{
                scope.row.state == 1 ? "禁用" : "启用"
              }}</span></el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.state == 1 ? true : false"
              @click="update(scope.row)"
              >修改</el-button
            >
            <el-button
              ref="del"
              type="text"
              size="small"
              :disabled="scope.row.state == 1 ? true : false"
              @click="remove(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="per_page"
        layout=" prev, pager, next, sizes, jumper"
        :total="counst"
        :hide-on-single-page="value"
      >
      </el-pagination>
      <!-- 新增弹出层 -->
      <el-dialog
        title="新增目录"
        :visible.sync="dialogFormVisible"
        width="390px"
        @closed="closed"
      >
        <el-form :model="addForm" :rules="rules" ref="form">
          <el-form-item
            label="所属学科"
            :label-width="formLabelWidth"
            v-if="this.isSkip"
          >
            <el-select v-model="addForm.subjectID" placeholder="请选择学科">
              <el-option
                v-for="item in subjects"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="目录名称"
            :label-width="formLabelWidth"
            prop="directoryName"
          >
            <el-input
              v-model.trim="addForm.directoryName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 修改弹出层 -->
      <el-dialog
        title="新增目录"
        :visible.sync="editFormVisible"
        width="390px"
        @closed="closed"
      >
        <el-form :model="editForm" :rules="rules" ref="form">
          <el-form-item
            label="所属学科"
            :label-width="formLabelWidth"
            v-if="this.isSkip"
          >
            <el-select v-model="editForm.subjectID" placeholder="请选择学科">
              <el-option
                v-for="item in subjects"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="目录名称"
            :label-width="formLabelWidth"
            prop="directoryName"
          >
            <el-input
              v-model.trim="editForm.directoryName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateInfor">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, changeState, remove, update, add } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      // 跳转数据
      skipData: {},
      // 判断是否是其他页面跳转过来
      isSkip: true,
      // 修改需要的id
      editId: '',
      // 验证
      rules: {
        directoryName: [{ required: true, message: '请输入目录名称', trigger: 'blur' }, { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }]
      },
      // 新增弹出层表单
      addForm: { subjectID: '', directoryName: '' },
      // 修改弹出层
      editForm: { subjectID: '', directoryName: '' },
      // 弹出层学科列表
      subjects: [],
      // 表单label宽度
      formLabelWidth: '80px',
      // 是否打开新增弹出层
      dialogFormVisible: false,
      // 是否打开新增弹出层
      editFormVisible: false,
      // input值
      input: '',
      // 查询状态
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 }
      ],
      // 状态栏值
      state: '',
      // 目录名称
      directoryName: '',
      // 数据总数
      counst: 1,
      // 禁用操作按钮
      disabled: null,
      // 当前页码
      page: 1,
      // 每页数据条数
      per_page: 10,
      // 只有一页的时候隐藏分页
      value: false,
      // 不可关闭的消息
      closable: false,

      // 数据列表
      form: [],
      // 表单数据
      filter: {}
    }
  },
  created () {
    if (this.$route.query.id) {
      this.isSkip = false
      this.skipData = this.$route.query
    }
    // console.log(this.$route.query)
    // 目录列表
    this.list()
    // 学科列表
    this.simple()
  },
  watch: {
    '$route.query.id': {
      immediate: true,
      handler (newVal, oldVal) {
        // console.log(newVal)
        // console.log(oldVal)
        if (oldVal) {
          // 目录列表
          this.skipData = {}
          this.list()
          this.isSkip = true
          // this.$router.push('/subjects/directorys')
        }
      }

    }

  },
  methods: {
    // 修改事件
    async updateInfor () {
      if (!this.isSkip) {
        this.editForm.subjectID = parseInt(this.$route.query.id)
      }
      // console.log(this.editId)
      if (this.editForm.subjectID === '' || this.editForm.directoryName === '') {
        return this.$message({
          type: 'error',
          message: '请输入内容'
        })
      } else {
        const params = {
          id: this.editId,
          subjectID: this.editForm.subjectID || '',
          directoryName: this.editForm.directoryName || ''
        }
        await update(params)

        // 关闭弹出层
        this.editFormVisible = false

        this.$message({
          type: 'success',
          message: '修改内容成功'
        })

        // 刷新列表
        this.list()
        // 清空表单内容
        this.editForm.subjectID = ''
        this.editForm.directoryName = ''
      }
    },
    // 关闭弹框清空表单
    closed () {
      // 清空表单内容
      // this.addForm.subjectID = ''
      // this.addForm.directoryName = ''
      this.$refs.form.resetFields()
    },
    // 返回
    back () {
      this.$router.push('/subjects/list')
    },
    // 目录添加
    async add () {
      if (!this.isSkip) {
        this.addForm.subjectID = parseInt(this.$route.query.id)
      }

      if (this.addForm.subjectID === '' || this.addForm.directoryName === '') {
        return this.$message({
          type: 'error',
          message: '请输入内容'
        })
      } else {
        const params = {
          subjectID: this.addForm.subjectID || '',
          directoryName: this.addForm.directoryName || ''
        }
        await add(params)

        // 关闭弹出层
        this.dialogFormVisible = false

        this.$message({
          type: 'success',
          message: '添加成功'
        })
        this.page = 1
        // 刷新列表
        this.list()
        // 清空表单内容
        this.addForm.subjectID = ''
        this.addForm.directoryName = ''
      }
    },
    // 学科简单列表
    async simple () {
      const { data } = await simple()
      // console.log(data)
      this.subjects = data
      // console.log(this.subjects)
    },
    // 控制弹出层
    openDialog () {
      // 打开弹出层
      this.dialogFormVisible = true
    },
    // 目录列表
    async list () {
      let id = null
      if (!this.isSkip) {
        id = this.skipData.id
      }

      // console.log(id)
      // 传参
      const params = {
        page: this.page,
        pagesize: this.per_page,
        state: this.state.toString() || null,
        directoryName: this.directoryName || null,
        subjectID: id
      }
      const { data } = await list(params)
      // 赋值数据总数
      this.counst = data.counts
      // console.log(data)
      // 赋值列表数据
      this.form = data.items
      // console.log(this.form)
      if (this.form.state === 1) {
        this.disabled = false
      }
    },
    // 清除搜索框
    delSearch () {
      this.state = ''
      this.input = ''
    },
    // 搜索框
    onSearch () {
      this.page = 1
      // console.log(this.state)
      // console.log(this.directoryName)
      this.list()
    },
    // 分页
    handleSizeChange (e) {
      // console.log(e)
      this.per_page = e
      // 页码更新后重新调用列表数据方法
      this.list()
    },
    handleCurrentChange (e) {
      this.page = e
      // 页码更新后重新调用列表数据方法
      this.list()
    },
    // 操作按钮
    // 启用 禁用
    async changeState (e) {
      // console.log(e)

      try {
        // 修改按钮状态
        if (e.state === 1) {
          e.state = 0
        } else if (e.state === 0) {
          e.state = 1
        }
        const params = {
          id: e.id,
          state: e.state
        }
        await changeState(params)
        // 修改状态之后刷新列表
        this.list()
        this.$message({
          message: '修改状态成功!',
          type: 'success'
        })
      } catch (error) {
        this.$message({
          message: '修改状态失败!',
          type: 'error'
        })
      }
    },
    // 修改
    async update (e) {
      // console.log(e)
      // 打开弹出层
      this.editFormVisible = true
      // console.log(e)
      this.editForm.subjectID = e.subjectID
      this.editForm.directoryName = e.directoryName

      this.editId = e.id
    },
    // 删除
    remove (a) {
      // console.log(a)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(a)
        try {
          const params = {
            id: a.id
          }
          await remove(params)
          // 删除之后重新渲染
          this.list()
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
        } catch (error) {
          this.$message({
            message: '删除失败!',
            type: 'error'
          })
        }
      }).catch(() => {
        // console.log(a)
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped lang='less'>
// 主体
.container {
  padding: 15px;
  // 学科层头部
  .el-breadcrumb {
    // display: none;
    height: 30px;
    border-bottom: 1px solid #ebeef5;
    // margin-bottom: 10px;
  }
  .seach {
    padding-top: 15px;
  }
  // 按钮
  .btn {
    position: relative;
    .add {
      position: absolute;
      right: 13px;
      top: 22px;
    }
    // 返回上一级
    .back {
      // display: none;
      position: absolute;
      right: 125px;
      top: 22px;
    }
  }

  // 提示信息
  .el-alert {
    margin-bottom: 15px;
  }
  // 分页
  .el-pagination {
    margin-top: 10px;
    text-align: right;
  }
  // 弹出层
  .dialog-footer {
    text-align: right !important;
  }
  .el-select--medium {
    width: 100%;
  }
}
</style>
